<template>
    <div class="header">
        <div class="icon back">
            <router-link to="/">
                <svg style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2161">
                    <path d="M128.512 512l336.969143 336.969143-51.712 51.712L0 486.912 413.769143 73.142857l51.712 51.712L151.478857 438.857143H1024v73.142857z" p-id="2162"></path>
                </svg>
            </router-link>
        </div>
        <div class="title">推箱子</div>
        <div class="icon setting" @click="creatStatus = true">
            <svg style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3057">
                <path d="M510.421333 371.306667c-76.736 0-139.178667 62.997333-139.178666 140.416s62.442667 140.437333 139.178666 140.437333 139.178667-62.997333 139.178667-140.437333-62.442667-140.416-139.178667-140.416z m0 238.165333c-52.309333 0-96.512-44.778667-96.512-97.770667s44.202667-97.749333 96.512-97.749333c52.330667 0 96.512 44.757333 96.512 97.749333s-44.181333 97.770667-96.512 97.770667z m322.112-71.573333l-24.874666-15.296c0.384-3.477333 0.64-7.04 0.64-10.88 0-3.733333 0-7.381333-0.170667-11.157334l24.170667-14.890666c40.448-23.658667 54.506667-75.84 31.36-116.266667l-54.698667-96.362667c-20.288-38.08-68.821333-56.170667-115.84-32.32l-25.045333 14.293334a519.530667 519.530667 0 0 0-16.896-10.112v-30.144c0-46.784-37.781333-84.842667-84.181334-84.842667h-109.994666c-46.421333 0-84.181333 38.058667-84.181334 84.842667v29.610666c-5.76 3.093333-11.562667 6.528-17.429333 10.346667l-23.168-13.205333c-15.402667-10.368-32.106667-11.562667-43.328-11.562667-29.824 0-57.216 15.701333-73.557333 42.56l-54.954667 96.789333c-23.210667 40.469333-9.173333 92.672 30.890667 116.096l25.045333 15.424c-0.362667 3.477333-0.64 7.018667-0.64 10.88 0 3.733333 0 7.402667 0.170667 11.178667l-24.192 14.869333c-40.448 23.658667-54.506667 75.861333-31.338667 116.288l54.72 96.362667c20.309333 38.058667 68.992 56.085333 115.84 32.298667l25.024-14.293334c5.568 3.456 11.2 6.848 16.896 10.112v30.122667c0 46.784 37.76 84.864 84.181333 84.864h109.994667c46.421333 0 84.181333-38.058667 84.181333-84.864v-29.610667c5.781333-3.093333 11.562667-6.528 17.429334-10.346666l23.146666 13.184c15.402667 10.368 32.128 11.584 43.349334 11.584 29.824 0 57.216-15.68 73.536-42.538667l55.573333-97.941333c21.12-42.602667 7.466667-92.010667-31.658667-115.072z m-5.952 95.082666l-54.677333 96.298667c-8.32 13.696-21.738667 21.525333-36.778667 21.525333-9.088 0-15.082667-1.322667-20.842666-5.12l-48.085334-27.456-11.114666 8.042667a195.328 195.328 0 0 1-33.984 20.053333l-12.586667 5.653334v56.682666c0 23.274667-18.624 42.197333-41.514667 42.197334h-109.994666c-22.890667 0-41.514667-18.922667-41.514667-42.197334V752.64l-11.712-5.909333c-11.669333-5.888-23.466667-13.333333-35.968-21.226667l-10.837333-6.826667-46.314667 26.474667c-23.530667 11.904-48.170667 3.584-58.24-15.317333l-55.04-96.917334c-11.413333-19.925333-4.16-46.634667 16.234667-58.56l48.768-29.994666-2.88-14.549334c-1.173333-5.888-1.173333-10.752-1.173334-18.090666 0-3.136 0.341333-5.952 0.661334-8.768a120.96 120.96 0 0 0 0.917333-13.44v-11.925334L213.226667 448.853333c-19.989333-11.690667-27.242667-38.378667-15.786667-58.368l54.656-96.298666c8.341333-13.674667 21.738667-21.525333 36.778667-21.525334 9.066667 0 15.104 1.322667 20.842666 5.12l48.064 27.456 11.136-8.021333a192.768 192.768 0 0 1 33.962667-20.053333l12.608-5.653334V214.826667c0-23.253333 18.624-42.176 41.514667-42.176h109.994666c22.890667 0 41.514667 18.922667 41.514667 42.176v56l11.712 5.909333c11.690667 5.888 24.021333 13.696 35.946667 21.226667l10.837333 6.848 46.336-26.496c23.530667-11.946667 48.170667-3.584 58.24 15.317333l55.018667 96.917333c11.413333 19.925333 4.16 46.613333-16.256 58.56l-48.725334 29.994667 2.858667 14.528c1.173333 5.888 1.173333 10.752 1.173333 18.090667 0 3.136-0.362667 5.973333-0.64 8.810666a120.597333 120.597333 0 0 0-0.917333 13.44v11.925334l46.677333 28.736c19.733333 11.52 26.282667 37.077333 15.808 58.346666z" fill="#222222" p-id="3058"></path>
            </svg>
        </div>
    </div>
    <settingMenu v-if="creatStatus" :creatStatus="creatStatus" @closeShade="closeShade"></settingMenu>
    <div class="levels">
        <level v-for="(item, index) in levels" :name="index + 1" :id="item.id" :star="item.star" :key="'level_' + index"></level>
    </div>
</template>

<script>
import level from './level'
import settingMenu from './menu'

export default {
    components: {
        level,
        settingMenu
    },
    async mounted() {
        const levels = await window.DB.level.toArray();
        this.levels = levels;
    },
    data() {
        return {
            creatStatus: false,
            levels: [],
        }
    },
    methods: {
        closeShade() {
            this.creatStatus = false;
        },
    }
}
</script>

<style>
    .header { height: 60px; z-index: 99; background-color: #fff; position: relative; overflow: hidden; border-radius: 0 0 15px 15px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
    .header .icon { width: 60px; text-align: center; line-height: 60px; height: 60px; position: absolute; left: 0; }
    .header .icon.setting { left: auto; right: 0; }
    .header .icon svg { width: 30px; height: 30px; }
    .header .title { text-align: center; line-height: 60px; position: absolute; left: 60px; right: 60px; font-size: 25px;}
    .levels { text-align: center; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; overflow-x: hidden; overflow-y: auto; padding: 70px 0; }
    .level { width: 25%; overflow:hidden ; margin: 10px 2.5%; display: inline-block; border-radius: 15px; border: 3px solid #ccc; line-height: 60px; background-color: #f90; font-size: 30px; color: #fff;  text-align: center; height: 100px; } 
    .stars { line-height: 20px;}
</style>